<template>
	<div>
		<main>
			<div class="page-location">消息中心/审批</div>
			<div class="profile-section">
				<img src="../assets/kitty.jpg" alt="Profile Picture" class="profile-picture" />
				<div class="profile-details">
					<div>姓名: {{ items[0].name }}</div>
					<div>所在部门: {{ items[0].faculty }}</div>
					<div>学号: {{ items[0].user_code }}</div>
					<div>所属院系: {{ items[0].major }}</div>
					<div>审批提交时间: {{items[0].apply_time}}</div>
					<div>审批项目: {{ items[0].type }}</div>
				</div>
			</div>

			<hr />
			<div class="left-content">
				<div class="file-table-section">
					<div style="width:100px;float: left;">材料表格：</div>
					<div class="file-info">
						<a href="path-to-file/学业成绩_202310221786.xlsx">{{items[0].apply_title}}</a>
					</div>
					<el-table class="table" :data="tableData" stripe style="width: 100%;margin-top: 25px;"
						:header-cell-style="{background:'#951d1d',color:'white'}">

						<el-table-column prop="course_name" label="课程名">
						</el-table-column>

						<el-table-column prop="credict" label="学分">
						</el-table-column>

						<el-table-column prop="score" label="绩点">
						</el-table-column>

						<el-table-column prop="isvalid" label="是否认证">
						</el-table-column>

					</el-table>
				</div>
			</div>
			<div class="right-content">
				<div class="performance">
					<div>均绩：{{items[0].valid_gpa}}</div>
					<div>学分：{{items[0].valid_credits}}</div>
				</div>
				<div class="system-calculation-note">以上成绩为系统计算后赋值</div>

				<div class="comment-section">
					<textarea type="text" id="comment" style="height: 300px;width: 400px;font-size: 20px;"
						placeholder="请输入批注内容:" v-model="tips"/>
				</div>

				<div class="action-buttons">
					<button class="approve" @click="approve">通过</button>
					<button class="reject" @click="reject">驳回</button>
				</div>
			</div>
		</main>
	</div>
</template>


<script>
	import axios from "axios"
	export default {
		name: 'ScholarshipAssessmentPage',
		data() {
			return {
				items: [],
				tableData: [],
				applyId: 0,
				pf: 0,
				tips:''
			};
		},
		created() {
			// 获取路由参数
			this.applyId = this.$route.query.applyId;
			console.log(this.applyId);
			this.getInfo();
		},
		computed: {

		},
		mounted() {

		},
		methods: {
			getInfo() {
				const that = this
				const url = this.$API_URL + '/teacher/getWApplyConditions';
				axios.get(url, {
						params: {
							apply_id: that.applyId
						}
					}, {
						headers: {
							'Content-Type': 'application/json'
						}
					})
					.then(response => {
						var temp = response.data;
						for (var t of temp) {
							if (t.type == 'study') t.type = '学业成绩'
							else if (t.type == 'academic') t.type = '学术竞赛'
							else if (t.type == 'general') t.type = '综合素质'
							var arr = t.apply_time.split(" ");
							var monthTable = [
								"Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"
							]
							var day = arr[1];
							var month = monthTable.indexOf(arr[2]) + 1;
							var year = arr[3];
							t.apply_time = year + "-" + month + "-" + day;
						}
						that.items = temp;
						console.log(that.items)
						const url2 = this.$API_URL + '/teacher/stuCourse';
						axios.get(url2, {
								params: {
									user_id: that.items[0].id
								}
							}, {
								headers: {
									'Content-Type': 'application/json'
								}
							})
							.then(response => {
								console.log("stuCourse");
								console.log(response);
								var temp = response.data;
								for (var t of temp) {
									if (t.isvalid == 1) t.isvalid = '是'
									else if (t.isvalid == 0) t.isvalid = '否'
								}
								that.tableData = temp;
								console.log(that.id);
								console.log(temp);
							})
					})

			},
			approve() {
				const that = this;
				that.pf = 1;
				const url1 = this.$API_URL + '/teacher/pfApply';
				var formData = new FormData();
				formData.append('apply_id', this.applyId);
				formData.append('apply_status', this.pf);
				formData.append('tips', this.tips);
				axios.post(url1, formData, {
						headers: {
							'Content-Type': 'application/x-www-form-urlencoded'
						}
					})
					.then((res) => {
						return res
					})
					.catch((err) => {
						return err
					})
					this.$router.push({
					  path: '/message'
					});
			},
			reject() {
				const that = this;
				const url = this.$API_URL + '/teacher/pfApply';
				var formData = new FormData();
				formData.append('apply_id', that.applyId);
				formData.append('apply_status', that.pf);
				formData.append('tips', this.tips);
				axios.post(url, formData, {
						headers: {
							'Content-Type': 'application/x-www-form-urlencoded'
						}
					})
					.then((res) => {
						return res
					})
					.catch((err) => {
						return err
					})
					this.$router.push({
					  path: '/message'
					});
			}
		}
	}
</script>


<style scoped>
	header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		background-color: #951D1D;
		/* Set the background color */
		/* Add your additional styling here */
		padding: 10px;
		/* Example padding */
		color: white;
		/* Example text color for better contrast */
	}

	.logo {
		/* Add your styling for the logo here */
	}

	.welcome-message {
		/* Add your styling for the welcome message here */
	}

	.page-location {
		color: grey;
		margin-right: 20px;
		text-align: left;
		/* Add your styling for the page location text here */
	}

	.profile-section {
		display: flex;
		align-items: flex-start;
		margin-top: 20px;
	}

	.profile-picture {
		width: 80px;
		/* Adjust as needed */
		height: 80px;
		/* Adjust as needed */
		margin-right: 20px;
	}

	.profile-details {
		display: grid;
		margin-top: 5px;
		grid-template-columns: repeat(4, auto);
		grid-template-rows: repeat(2, 25px);
		gap: 25px;
		justify-items: start;
	}

	.file-section {
		display: flex;
		flex-direction: row-reverse;
		float: left;
	}

	.file-info {
		display: flex;
		flex-direction: row-reverse;
		float: left;
		nav-right: 10px;
	}

	.file-details {}

	.performance {
		display: flex;
		justify-content: space-evenly;
		align-items: center;
		font-size: 1.2em;
	}

	.content {
		display: flex;
	}

	.left-content {
		float: left;
		width: 65%;
	}

	.right-content {
		float: right;
		width: 32%;
		flex-direction: column;
		display: flex;
	}

	.system-calculation-note {
		color: grey;
		font-size: 0.8em;
	}

	.comment-section input {
		width: 100%;
		float: left;
		margin: 10px 0;
	}

	.action-buttons {
		display: flex;
		justify-content: space-evenly;
		margin: 10px 0;
	}

	.approve {
		background-color: #19bd54;
		color: white;
		width: 100px;
		height: 50px;
		/* Add more styling */
	}

	.reject {
		background-color: #BD3124;
		color: white;
		width: 100px;
		height: 50px;
		/* Add more styling */
	}

	hr {
		margin: 20px 0;
	}

	/* Add additional styles for main content based on the image uploaded */
</style>